// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/*导入vuex*/
import vuex from 'vuex'
/*使用vuex插件*/
Vue.use(vuex)
/*
  创建一个store
  vuex使用一个全局单例的store对象来管理应用程序的大部分状态(数据)
  state: 表示store中的数据  类似组件的data
  
*/
var store = new vuex.Store({
  state:{
    number:100,
    name:'张',
    firstName:'yue',
    lastName:'jing',
    list:[]
  },
  /*getters中定义派生数据，当需要从store中获取一些处理之后的数据时，使用getter，类似于组件中的computed*/
  getters:{
    fulName:function(state){
      return state.firstName + state.lastName
    }
  },
  /*
  mutations：表示store中修改数据的方法，
  vuex规定对于state中的数据，不能直接修改，要通过mutations进行修改
  mutations中的函数有两个参数，
    参数一：state
    参数二：第二个组件通过commit调用这些函数时所传的参数
  */
  mutations:{
    setNmuber:function(state,n){
      state.number = n
    },
    setList:function(state,n){
      state.list = n
    }
  },
  /*
  actions:与mutations类似，
  actions中写的是异步操作，
  actions中不能直接修改state，需要通过commit提交给mutations修改
  */
  actions:{
    reqList:function({commit}){
      setTimeout(function() {
        var res = [1,3,4,5]
        commit('setList',res)
      }, 1000);
    }
  }
})

/* eslint-disable no-new */
/*在根组件中注册store对象，这样在任何组件中都可以通过this.$store获得store对象(数据仓库)*/
new Vue({
  el: '#app',
  store,
  router,
  template: '<App/>',
  components: { App }
})
